<template>
  <div class="nav">
    <Breadcrumb>
      <BreadcrumbItem>系统配置</BreadcrumbItem>
      <BreadcrumbItem>用户权限</BreadcrumbItem>
      <BreadcrumbItem>列表</BreadcrumbItem>
    </Breadcrumb>
  </div>
  <div class="tab">
    <Tabs value="name1" :animated="false" style="padding: 10px">
      <TabPane label="内部人员" name="nbry">
        <div class="nbry">
          <div class="left">
            <Collapse v-model="value" style="width: 220px">
              <Panel name="1">
                部门
                <template #content> 中成药部门 安保部 </template>
              </Panel>
            </Collapse>
          </div>

          <div class="right">
            <vxe-grid
              v-bind="gridOptions1"
              style="padding-left: 15px; padding-right: 15px"
            >
              <template #operate>
                <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                  >查看</a
                >
                <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                  >修改</a
                >
                <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                  >删除</a
                >
                <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                  >禁用</a
                >
                <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                  >二维码</a
                >
              </template>
              <template #toolbar_buttons>
                <div class="a">
                  <div class="a1">
                    人员状态
                    <Select
                      v-model="model"
                      style="width: 130px; padding: 10px"
                      placeholder="请选择"
                    >
                      <Option
                        v-for="item in stateList"
                        :value="item.value"
                        :key="item.value"
                        >{{ item.label }}</Option
                      >
                    </Select>

                    <vxe-input
                      style="width: 300px"
                      placeholder="请输入供应商、采购标题"
                    ></vxe-input>
                    <vxe-button status="primary">搜索</vxe-button>
                  </div>

                  <div class="a2">
                    <vxe-button
                      @click="
                        nbryxzvalue = true;
                        getKtzhLabel();
                      "
                      style="
                        background-color: #945635;
                        color: aliceblue;
                        width: 100px;
                      "
                      >+ 新增人员</vxe-button
                    >
                    <Modal
                      v-model="nbryxzvalue"
                      title="添加人员信息"
                      @on-ok="nbryxz"
                      @on-cancel="cancel"
                      width="800px"
                    >
                      <div class="b">
                        <div class="left">
                          <Form
                            ref="formValidate1"
                            :model="formValidate1"
                            :rules="ruleValidate1"
                            label-width="80"
                          >
                            <FormItem label="姓名" prop="user_name">
                              <Input
                                v-model="formValidate1.user_name"
                                placeholder="请输入姓名"
                              ></Input>
                            </FormItem>
                            <FormItem label="简码" prop="user_shortname">
                              <Input
                                v-model="formValidate1.user_shortname"
                                placeholder="请输入简码"
                              ></Input>
                            </FormItem>
                            <FormItem label="性别" prop="user_sex">
                              <RadioGroup v-model="formValidate1.user_sex">
                                <Radio label="1">男</Radio>
                                <Radio label="2">女</Radio>
                                <Radio label="9">保密</Radio>
                              </RadioGroup>
                            </FormItem>
                            <FormItem label="民族" prop="user_nation">
                              <Select
                                v-model="formValidate1.user_nation"
                                placeholder="请选择民族"
                              >
                                <Option value="1">汉族</Option>
                                <Option value="2">蒙古族</Option>
                                <Option value="3">回族</Option>
                                <Option value="4">藏族</Option>
                                <Option value="5">维吾尔族</Option>
                              </Select>
                            </FormItem>
                            <FormItem label="身份证号" prop="user_idnum">
                              <Input
                                v-model="formValidate1.user_idnum"
                                placeholder="请输入身份证号"
                              ></Input>
                            </FormItem>
                            <FormItem label="出生年月" prop="user_birthday">
                              <DatePicker
                                type="month"
                                placeholder="请选择出生年月"
                                v-model="formValidate1.user_birthday"
                              ></DatePicker>
                            </FormItem>
                            <FormItem prop="user_workday" label="工作日期">
                              <DatePicker
                                type="date"
                                placeholder="请选择工作日期"
                                v-model="formValidate1.user_workday"
                              ></DatePicker>
                            </FormItem>

                            <FormItem label="所属机构" prop="org_in_id">
                              <Select
                                v-model="formValidate1.org_in_id"
                                placeholder="请选择所属机构"
                              >
                                <Option value="159">中成药部门</Option>
                                <Option value="162">安保部</Option>
                              </Select>
                            </FormItem>
                            <FormItem label="开通账号" prop="is_open_account">
                              <RadioGroup
                                v-model="formValidate1.is_open_account"
                                @on-change="getKtzhLabel"
                              >
                                <Radio label="1">是</Radio>
                                <Radio label="0">否</Radio>
                              </RadioGroup>
                            </FormItem>
                            <div id="ktzh">
                              <FormItem label="角色" prop="user_role_arr">
                                <Select
                                  multiple
                                  v-model="formValidate1.user_role_arr"
                                  placeholder="请选择角色"
                                >
                                  <Option value="1">超级管理员</Option>
                                  <Option value="2">药房管理员</Option>
                                  <Option value="3">药品录入员</Option>
                                  <Option value="4">安保人员</Option>
                                </Select>
                              </FormItem>
                              <FormItem label="账号名称" prop="account_name">
                                <Input
                                  v-model="formValidate1.account_name"
                                  placeholder="请输入账号名"
                                ></Input>
                              </FormItem>
                              <FormItem label="登录密码" prop="account_pwd">
                                <Input
                                  v-model="formValidate1.account_pwd"
                                  placeholder="请输入登录密码"
                                ></Input>
                              </FormItem>
                              <FormItem label="重复密码" prop="account_pwd_re">
                                <Input
                                  v-model="formValidate1.account_pwd_re"
                                  placeholder="请输入重复密码"
                                ></Input>
                              </FormItem>
                            </div>
                          </Form>
                        </div>

                        <div class="right1">
                          <Form
                            ref="formValidate1"
                            :model="formValidate1"
                            :rules="ruleValidate1"
                            label-width="120"
                          >
                            <FormItem label="办公电话" prop="user_telphone">
                              <Input
                                v-model="formValidate1.user_telphone"
                                placeholder="请输入办公电话"
                              ></Input>
                            </FormItem>

                            <FormItem label="电子邮件" prop="user_email">
                              <Input
                                v-model="formValidate1.user_email"
                                placeholder="请输入电子邮件"
                              ></Input>
                            </FormItem>
                            <FormItem label="移动电话" prop="user_phone">
                              <Input
                                v-model="formValidate1.user_phone"
                                placeholder="请输入移动电话"
                              ></Input>
                            </FormItem>
                            <FormItem label="执业类别" prop="user_job_type">
                              <Select
                                v-model="formValidate1.user_job_type"
                                placeholder="请选择执业类别"
                              >
                                <Option value="临床">临床</Option>
                                <Option value="中医">中医</Option>
                                <Option value="公共卫生">公共卫生</Option>
                                <Option value="口腔">口腔</Option>
                              </Select>
                            </FormItem>
                            <FormItem label="执业范围" prop="user_job_range">
                              <Select
                                v-model="formValidate1.user_job_range"
                                placeholder="请选择执业类别"
                              >
                                <Option value="内科专业">内科专业</Option>
                                <Option value="外科专业">外科专业</Option>
                              </Select>
                            </FormItem>
                            <FormItem label="执业证号" prop="user_job_num">
                              <Input
                                v-model="formValidate1.user_job_num"
                                placeholder="请输入执业证号"
                              ></Input>
                            </FormItem>
                            <FormItem
                              label="专业技术职务"
                              prop="user_job_title"
                            >
                              <Select
                                v-model="formValidate1.user_job_title"
                                placeholder="请选择专业技术职务"
                              >
                                <Option value="医师">医师</Option>
                                <Option value="药剂">药剂</Option>
                                <Option value="主任医师">主任医师</Option>
                                <Option value="护士">护士</Option>
                                <Option value="主管护师">主管护师</Option>
                              </Select>
                            </FormItem>
                            <FormItem
                              label="聘任技术职务"
                              prop="user_job_title_app"
                            >
                              <Select
                                v-model="formValidate1.user_job_title_app"
                                placeholder="请选择聘任技术职务"
                              >
                                <Option value="医师">医师</Option>
                                <Option value="药剂">药剂</Option>
                                <Option value="主任医师">主任医师</Option>
                                <Option value="护士">护士</Option>
                                <Option value="主管护师">主管护师</Option>
                              </Select>
                            </FormItem>
                            <FormItem label="个人简介" prop="user_desc">
                              <Input
                                v-model="formValidate1.user_desc"
                                type="textarea"
                                :autosize="{ minRows: 6, maxRows: 6 }"
                                placeholder="请输入个人简介"
                              ></Input>
                            </FormItem>
                            <div id="kt">
                              <FormItem label="手机号" prop="account_phone">
                                <Input
                                  v-model="formValidate1.account_phone"
                                  placeholder="请输入手机号"
                                ></Input>
                              </FormItem>
                              <FormItem label="邮箱地址" prop="account_mail">
                                <Input
                                  v-model="formValidate1.account_mail"
                                  placeholder="请输入邮箱地址"
                                ></Input>
                              </FormItem>
                            </div>
                          </Form>
                        </div>
                      </div>
                    </Modal>
                    <vxe-button
                      style="
                        width: 88px;
                        border: none;
                        background-color: #f48c72;
                        color: #ffffff;
                      "
                      >批量删除</vxe-button
                    >
                    <vxe-button
                      style="
                        width: 88px;
                        border: none;
                        background-color: #85ddb1;
                        color: #ffffff;
                      "
                      >批量启用</vxe-button
                    >
                    <vxe-button
                      style="
                        width: 88px;
                        border: none;
                        background-color: #ffc875;
                        color: #ffffff;
                      "
                      >批量禁用</vxe-button
                    >
                  </div>
                </div>
              </template>
              <template #pager>
                <!--使用 pager 插槽-->
                <vxe-pager
                  :layouts="[
                    'Sizes',
                    'PrevJump',
                    'PrevPage',
                    'Number',
                    'NextPage',
                    'NextJump',
                    'FullJump',
                    'Total',
                  ]"
                  v-model:current-page="tablePage.currentPage"
                  v-model:page-size="tablePage.pageSize"
                  :total="tablePage.total"
                  @page-change="handlePageChange"
                >
                </vxe-pager>
              </template>
            </vxe-grid>
          </div>
        </div>
      </TabPane>
      <TabPane label="内部机构" name="nbjg">
        <div class="nbjg">
          <vxe-grid
            v-bind="gridOptions2"
            style="padding-left: 15px; padding-right: 15px"
          >
            <template #operate>
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >查看</a
              >
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >修改</a
              >
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >删除</a
              >
            </template>
            <template #toolbar_buttons>
              <div class="a">
                <div>
                  部门分类
                  <Select
                    v-model="model"
                    style="width: 150px; padding: 10px"
                    placeholder="全部"
                  >
                    <Option
                      v-for="item in stateList"
                      :value="item.value"
                      :key="item.value"
                      >{{ item.label }}</Option
                    >
                  </Select>
                  是否虚拟部门
                  <Select
                    v-model="model"
                    style="width: 150px; padding: 10px"
                    placeholder="全部"
                  >
                    <Option
                      v-for="item in stateList"
                      :value="item.value"
                      :key="item.value"
                      >{{ item.label }}</Option
                    >
                  </Select>

                  <vxe-input
                    style="width: 280px"
                    placeholder="请输入部门名称"
                  ></vxe-input>
                  <vxe-button status="primary">搜索</vxe-button>
                </div>

                <div>
                  <vxe-button
                    @click="nbjgxzvalue = true"
                    style="
                      background-color: #945635;
                      color: aliceblue;
                      width: 88px;
                    "
                    >+ 新增</vxe-button
                  ><Modal
                    v-model="nbjgxzvalue"
                    title="添加部门信息"
                    @on-ok="nbjgxz"
                    @on-cancel="cancel"
                    width="800px"
                  >
                    <div class="b">
                      <div class="left">
                        <Form
                          ref="formValidate2"
                          :model="formValidate2"
                          :rules="ruleValidate2"
                          label-width="120"
                        >
                          <FormItem label="上机部门" prop="org_pid">
                            <Select
                              v-model="formValidate2.org_pid"
                              placeholder="请选择"
                            >
                              <Option value="159">中药部门</Option>
                              <Option value="160">中成药部门</Option>
                              <Option value="162">安保部</Option>
                            </Select>
                          </FormItem>
                          <FormItem label="部门名称" prop="org_name">
                            <Input
                              v-model="formValidate2.org_name"
                              placeholder="请输入部门名称"
                            ></Input>
                          </FormItem>
                          <FormItem label="部门简称" prop="org_short_name">
                            <Input
                              v-model="formValidate2.org_short_name"
                              placeholder="请输入部门简称"
                            ></Input>
                          </FormItem>
                          <FormItem label="部门拼音" prop="org_py">
                            <Input
                              v-model="formValidate2.org_py"
                              placeholder="请输入部门拼音"
                            ></Input>
                          </FormItem>
                          <FormItem label="联系邮箱" prop="org_mail">
                            <Input
                              v-model="formValidate2.org_mail"
                              placeholder="请输入联系邮箱"
                            ></Input>
                          </FormItem>
                          <FormItem label="虚拟部门标识" prop="is_virtually">
                            <RadioGroup v-model="formValidate2.is_virtually">
                              <Radio label="0">否</Radio>
                              <Radio label="1">是</Radio>
                            </RadioGroup>
                          </FormItem>
                        </Form>
                      </div>

                      <div class="right1">
                        <Form
                          ref="formValidate1"
                          :model="formValidate2"
                          :rules="ruleValidate2"
                          label-width="120"
                        >
                          <FormItem label="部门分类" prop="org_type">
                            <Select
                              v-model="formValidate2.org_type"
                              placeholder="请选择部门分类"
                            >
                              <Option value="1">临床</Option>
                              <Option value="2">医技</Option>
                              <Option value="3">行政</Option>
                              <Option value="4">科研</Option>
                              <Option value="5">其他</Option>
                            </Select>
                          </FormItem>

                          <FormItem label="负责人" prop="org_person">
                            <Input
                              v-model="formValidate2.org_person"
                              placeholder="请输入负责人编号"
                            ></Input>
                          </FormItem>
                          <FormItem label="联系人" prop="org_contact">
                            <Input
                              v-model="formValidate2.org_contact"
                              placeholder="请输入办公电话"
                            ></Input>
                          </FormItem>

                          <FormItem label="手机号" prop="org_phone">
                            <Input
                              v-model="formValidate2.org_phone"
                              placeholder="请输入手机号"
                            ></Input>
                          </FormItem>
                          <FormItem label="联系电话" prop="org_tel">
                            <Input
                              v-model="formValidate2.org_tel"
                              placeholder="请输入联系电话"
                            ></Input>
                          </FormItem>
                        </Form>
                      </div>
                    </div>
                  </Modal>
                  <vxe-button
                    style="
                      width: 88px;
                      border: none;
                      background-color: #f48c72;
                      color: #ffffff;
                    "
                    >批量删除</vxe-button
                  >
                </div>
              </div>
            </template>
          </vxe-grid>
        </div>
      </TabPane>
      <TabPane label="外部人员" name="wbry">
        <div class="wbry">
          <vxe-grid
            v-bind="gridOptions3"
            style="padding-left: 15px; padding-right: 15px"
          >
            <template #operate>
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >查看</a
              >
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >修改</a
              >
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >删除</a
              >
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >禁用</a
              >
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >二维码</a
              >
            </template>
            <template #toolbar_buttons>
              <div class="a">
                <div>
                  人员状态
                  <Select
                    v-model="model"
                    style="width: 150px; padding: 10px"
                    placeholder="全部"
                  >
                    <Option
                      v-for="item in stateList"
                      :value="item.value"
                      :key="item.value"
                      >{{ item.label }}</Option
                    >
                  </Select>

                  <vxe-input
                    v-model="searchName"
                    style="width: 280px"
                    placeholder="请输入部门名称"
                  ></vxe-input>
                  <vxe-button status="primary">搜索</vxe-button>
                </div>

                <div>
                  <vxe-button
                    @click="(wbryxzvalue = true), getKtzhLabel()"
                    style="
                      background-color: #945635;
                      color: aliceblue;
                      width: 88px;
                    "
                    >+ 新增</vxe-button
                  >
                  <Modal
                    v-model="wbryxzvalue"
                    title="添加人员信息"
                    @on-ok="wbryxz"
                    @on-cancel="cancel"
                    width="800px"
                  >
                    <div class="b">
                      <div class="left">
                        <Form
                          :model="formValidate3"
                          :rules="ruleValidate3"
                          label-width="80"
                        >
                          <FormItem label="姓名" prop="user_name">
                            <Input
                              v-model="formValidate3.user_name"
                              placeholder="请输入姓名"
                            ></Input>
                          </FormItem>
                          <FormItem label="拼音" prop="user_py">
                            <Input
                              v-model="formValidate3.user_py"
                              placeholder="请输入拼音"
                            ></Input>
                          </FormItem>
                          <FormItem label="性别" prop="user_sex">
                            <RadioGroup v-model="formValidate3.user_sex">
                              <Radio label="1">男</Radio>
                              <Radio label="2">女</Radio>
                              <Radio label="9">保密</Radio>
                            </RadioGroup>
                          </FormItem>
                          <FormItem label="民族" prop="user_nation">
                            <Select
                              v-model="formValidate3.user_nation"
                              placeholder="请选择民族"
                            >
                              <Option value="1">汉族</Option>
                              <Option value="2">蒙古族</Option>
                              <Option value="3">回族</Option>
                              <Option value="4">藏族</Option>
                              <Option value="5">维吾尔族</Option>
                            </Select>
                          </FormItem>
                          <FormItem label="移动电话" prop="user_mobile">
                            <Input
                              v-model="formValidate3.user_mobile"
                              placeholder="请输入移动电话"
                            ></Input>
                          </FormItem>

                          <FormItem label="开通账号" prop="is_open_account">
                            <RadioGroup
                              v-model="formValidate3.is_open_account"
                              @on-change="getKtzhLabel"
                            >
                              <Radio label="1">是</Radio>
                              <Radio label="0">否</Radio>
                            </RadioGroup>
                          </FormItem>
                          <div id="ktzh1">
                            <FormItem label="账号名称" prop="account_name">
                              <Input
                                v-model="formValidate3.account_name"
                                placeholder="请输入账号名"
                              ></Input>
                            </FormItem>
                            <FormItem label="手机号" prop="account_phone">
                              <Input
                                v-model="formValidate3.account_phone"
                                placeholder="请输入手机号"
                              ></Input>
                            </FormItem>
                            <FormItem label="登录密码" prop="account_pwd">
                              <Input
                                v-model="formValidate3.account_pwd"
                                placeholder="请输入登录密码"
                              ></Input>
                            </FormItem>
                          </div>
                        </Form>
                      </div>

                      <div class="right1">
                        <Form
                          :model="formValidate3"
                          :rules="ruleValidate3"
                          label-width="120"
                        >
                          <FormItem label="身份证号" prop="user_idnum">
                            <Input
                              v-model="formValidate3.user_idnum"
                              placeholder="请输入身份证号"
                            ></Input>
                          </FormItem>
                          <FormItem label="出生年月" prop="user_birthday">
                            <DatePicker
                              type="month"
                              placeholder="请选择出生年月"
                              v-model="formValidate3.user_birthday"
                            ></DatePicker>
                          </FormItem>
                          <FormItem label="所属机构" prop="org_out_id">
                            <Select
                              v-model="formValidate3.org_in_id"
                              placeholder="请选择所属机构"
                            >
                              <Option value="77">外部机构</Option>
                              <Option value="81">外部机构1</Option>
                              <Option value="82">外部机构2</Option>
                            </Select>
                          </FormItem>
                          <FormItem label="办公电话" prop="user_work_phone">
                            <Input
                              v-model="formValidate3.user_work_phone"
                              placeholder="请输入办公电话"
                            ></Input>
                          </FormItem>

                          <FormItem label="电子邮件" prop="user_email">
                            <Input
                              v-model="formValidate3.user_email"
                              placeholder="请输入电子邮件"
                            ></Input>
                          </FormItem>

                          <div id="kt1">
                            <FormItem label="角色" prop="user_role_arr">
                              <Select
                                multiple
                                v-model="formValidate3.user_role_arr"
                                placeholder="请选择角色"
                              >
                                <Option value="1">超级管理员</Option>
                                <Option value="2">药房管理员</Option>
                                <Option value="3">药品录入员</Option>
                                <Option value="4">安保人员</Option>
                              </Select>
                            </FormItem>

                            <FormItem label="邮箱地址" prop="account_mail">
                              <Input
                                v-model="formValidate3.account_mail"
                                placeholder="请输入邮箱地址"
                              ></Input>
                            </FormItem>
                            <FormItem label="重复密码" prop="account_pwd_re">
                              <Input
                                v-model="formValidate3.account_pwd_re"
                                placeholder="请输入重复密码"
                              ></Input>
                            </FormItem>
                          </div>
                        </Form>
                      </div>
                    </div>
                  </Modal>
                  <vxe-button
                    style="
                      width: 88px;
                      border: none;
                      background-color: #f48c72;
                      color: #ffffff;
                    "
                    >批量删除</vxe-button
                  >
                  <vxe-button
                    style="
                      background-color: #75d8a6;
                      color: aliceblue;
                      width: 88px;
                    "
                    >批量启用</vxe-button
                  >
                  <vxe-button
                    style="
                      width: 88px;
                      border: none;
                      background-color: #ffce85;
                      color: #ffffff;
                    "
                    >批量禁用</vxe-button
                  >
                </div>
              </div>
            </template>
          </vxe-grid>
        </div>
      </TabPane>

      <TabPane label="外部机构" name="wbjg">
        <div class="wbjg">
          <vxe-grid
            v-bind="gridOptions4"
            style="padding-left: 15px; padding-right: 15px"
          >
            <template #operate>
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >查看</a
              >
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >修改</a
              >
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >删除</a
              >
            </template>
            <template #toolbar_buttons>
              <div class="a">
                <div style="padding-top: 5px; padding-bottom: 15px">
                  <vxe-input
                    v-model="searchName"
                    style="width: 280px"
                    placeholder="请输入机构名称"
                  ></vxe-input>
                  <vxe-button status="primary">搜索</vxe-button>
                </div>

                <div>
                  <vxe-button
                    @click="wbjgxzvalue = true"
                    style="
                      background-color: #945635;
                      color: aliceblue;
                      width: 88px;
                    "
                    >+ 新增</vxe-button
                  >
                  <Modal
                    v-model="wbjgxzvalue"
                    title="添加机构信息"
                    @on-ok="wbjgxz"
                    @on-cancel="cancel"
                    width="800px"
                  >
                    <div class="b">
                      <div class="left">
                        <Form
                          :model="formValidate4"
                          :rules="ruleValidate4"
                          label-width="140"
                        >
                          <FormItem label="机构名称" prop="org_name">
                            <Input
                              v-model="formValidate4.org_name"
                              placeholder="请输入机构名称"
                            ></Input>
                          </FormItem>
                          <FormItem label="机构简称" prop="org_short_name">
                            <Input
                              v-model="formValidate4.org_short_name"
                              placeholder="请输入机构简称"
                            ></Input>
                          </FormItem>
                          <FormItem label="机构拼音" prop="org_py">
                            <Input
                              v-model="formValidate4.org_py"
                              placeholder="请输入机构拼音"
                            ></Input>
                          </FormItem>
                          <FormItem
                            label="统一社会信用代码"
                            prop="org_credit_code"
                          >
                            <Input
                              v-model="formValidate4.org_credit_code"
                              placeholder="请输入统一社会信用代码"
                            ></Input>
                          </FormItem>
                        </Form>
                      </div>

                      <div class="right1">
                        <Form
                          ref="formValidate1"
                          :model="formValidate2"
                          :rules="ruleValidate2"
                          label-width="120"
                        >
                          <FormItem label="联系人" prop="org_contact">
                            <Input
                              v-model="formValidate4.org_contact"
                              placeholder="请输入联系人"
                            ></Input>
                          </FormItem>
                          <FormItem label="联系方式" prop="org_phone">
                            <Input
                              v-model="formValidate4.org_phone"
                              placeholder="请输入联系方式"
                            ></Input>
                          </FormItem>

                          <FormItem label="地址" prop="org_address">
                            <Input
                              v-model="formValidate4.org_address"
                              placeholder="请输入地址"
                            ></Input>
                          </FormItem>
                        </Form>
                      </div>
                    </div>
                  </Modal>
                  <vxe-button
                    style="
                      width: 88px;
                      border: none;
                      background-color: #f48c72;
                      color: #ffffff;
                    "
                    >批量删除</vxe-button
                  >
                </div>
              </div>
            </template>
          </vxe-grid>
        </div>
      </TabPane>
      <TabPane label="角色管理" name="jsgl">
        <div class="jsgl">
          <vxe-grid
            v-bind="gridOptions5"
            style="padding-left: 15px; padding-right: 15px"
          >
            <template #operate>
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >修改</a
              >
              <a style="color: #945635; padding-left: 5px; padding-right: 5px"
                >删除</a
              >
            </template>
            <template #toolbar_buttons>
              <div class="a">
                <div style="padding-top: 5px; padding-bottom: 15px">
                  <vxe-input
                    v-model="searchName"
                    style="width: 280px"
                    placeholder="请输入角色名称"
                  ></vxe-input>
                  <vxe-button status="primary">搜索</vxe-button>
                </div>

                <div>
                  <vxe-button
                  
                    style="
                      background-color: #945635;
                      color: aliceblue;
                      width: 88px;
                    "
                    >+ 新增</vxe-button
                  >
                  <Modal
                    v-model="jsxzvalue"
                    title="添加角色"
                    @on-ok="jsxz"
                    @on-cancel="cancel"
                    width="800px"
                  >
                    <div class="b">
                      <div class="left">
                        <Form
                          :model="formValidate5"
                          :rules="ruleValidate5"
                          label-width="80"
                        >
                          <FormItem label="上级角色" prop="role_pid">
                            <Select
                              multiple
                              v-model="formValidate5.role_pid"
                              placeholder="请选择角色"
                            >
                              <Option value="1">超级管理员</Option>
                              <Option value="2">药房管理员</Option>
                              <Option value="3">药品录入员</Option>
                              <Option value="4">安保人员</Option>
                            </Select>
                          </FormItem>
                          <FormItem label="角色名称" prop="role_name">
                            <Input
                              v-model="formValidate5.role_name"
                              placeholder="请输入角色名称"
                            ></Input>
                          </FormItem>
                          <FormItem label="角色描述" prop="account_phone">
                            <Input
                              v-model="formValidate5.account_phone"
                              placeholder="请输入角色描述"
                            ></Input>
                          </FormItem>
                        </Form>
                        <Tree :data="menudata" show-checkbox></Tree>
                      </div>
                    </div>
                  </Modal>
                  <vxe-button
                    style="
                      width: 88px;
                      border: none;
                      background-color: #f48c72;
                      color: #ffffff;
                    "
                    >批量删除</vxe-button
                  >
                </div>
              </div>
            </template>
          </vxe-grid>
        </div>
      </TabPane>
      <TabPane label="菜单管理" name="cdgl">
        <div class="cdgl">
          <vxe-grid
            v-bind="gridOptions6"
            style="padding-left: 15px; padding-right: 15px"
          >
            <template #toolbar_buttons>
              <div style="padding-top: 5px; padding-bottom: 15px">
                <vxe-input
                  v-model="searchName"
                  style="width: 280px"
                  placeholder="请输入菜单名称"
                ></vxe-input>
                <vxe-button status="primary">搜索</vxe-button>
              </div>
            </template>
            <template #caozuo> sd </template>
          </vxe-grid>
        </div>
      </TabPane>
    </Tabs>
  </div>
</template>
  
<script setup>
import moment from "moment";
import { ref, reactive, onMounted } from "vue";
import { Message } from "view-ui-plus";
import {
  api_get_nbrylist,
  api_post_nbrytianjia,
  api_get_orginslist,
  api_post_orgintianjia,
} from "../../../../api/xitongpeizhi/neiburenyuan";

import {
  api_post_userouts,
  api_get_userouts,
  api_get_orgouts,
  api_post_orgouts,
} from "../../../../api/xitongpeizhi/waiburenyuan";
import {
  api_post_roles,
  api_get_roles,
} from "../../../../api/xitongpeizhi/role";
import {
  api_post_menus,
  api_get_menus,
} from "../../../../api/xitongpeizhi/menu";
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10,
});
const handlePageChange = ({ currentPage, pageSize }) => {
  tablePage.currentPage = currentPage;
  console.log(tablePage.currentPage);
  tablePage.pageSize = pageSize;
  getNbryList();
};
const formValidate1 = ref({
  user_name: "姓名",
  user_shortname: "简码",
  user_sex: "性别",
  user_nation: "民族",
  user_idnum: "身份证号",
  user_birthday: "出生日期",
  user_workday: "工作日期",
  org_in_id: "所属机构",
  is_open_account: "开通账号",
  user_role_arr: ["角色"],
  account_name: "账号名称",
  account_pwd: "登录密码",
  account_pwd_re: "重复密码",
  user_telphone: "办公电话",
  user_email: "电子邮件",
  user_phone: "移动电话",
  user_job_type: "执业类别",
  user_job_range: "执业范围",
  user_job_num: "执业证号",
  user_job_title: "专业技术职务",
  user_job_title_app: "聘任技术职务",
  user_desc: "个人简介",
  account_phone: "手机号",
  account_mail: "邮箱地址",
  user_his_id: "123456",
  sort_num: "1",
});
const ruleValidate1 = ref({
  user_name: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur",
    },
  ],
  user_idnum: [
    {
      required: true,
      message: "请输入身份证",
      trigger: "blur",
      max: 18,
    },
  ],
  user_birthday: [
    {
      required: true,
      message: "请输入出生年月",
      trigger: "blur",
      type: "date",
    },
  ],
  user_workday: [
    {
      required: true,
      message: "请输入工作日期",
      trigger: "blur",
      type: "date",
    },
  ],
  org_in_id: [
    {
      required: true,
      message: "请选择所属机构",
      trigger: "change",
    },
  ],
  is_open_account: [
    {
      required: true,
      message: "",
      trigger: "change",
    },
  ],
  user_role_arr: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
  account_name: [
    {
      required: true,
      message: "请输入账号名称",
      trigger: "blur",
    },
  ],
  account_pwd: [
    {
      required: true,
      message: "请输入登录密码",
      trigger: "blur",
    },
  ],
  account_pwd_re: [
    {
      required: true,
      message: "请输入重复密码",
      trigger: "blur",
    },
  ],
  account_phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
  ],
  account_mail: [
    {
      required: true,
      message: "请输入格式正确的电子邮箱",
      trigger: "blur",
    },
    { type: "email" },
  ],
});

const getNbryList = () => {
  const params = {
    page: tablePage.currentPage,
    per_page: 10,
  };
  api_get_nbrylist(params)
    .then((res) => {
      gridOptions1.data = res.data.data.list;

      tablePage.total = res.data.data.total;
    })
    .catch((err) => {
      console.log(err);
    });
};

const getKtzhLabel = (label) => {
  const divkt = document.getElementById("kt");
  const divktzh = document.getElementById("ktzh");
  const divkt1 = document.getElementById("kt1");
  const divktzh1 = document.getElementById("ktzh1");
  divkt.style.display = "none";
  divktzh.style.display = "none";
  divkt1.style.display = "none";
  divktzh1.style.display = "none";

  if (label == "1") {
    divktzh.style.display = "block";
    divkt.style.display = "block";
    divktzh1.style.display = "block";
    divkt1.style.display = "block";
  } else {
    divkt.style.display = "none";
    divktzh.style.display = "none";
    divkt1.style.display = "none";
    divktzh1.style.display = "none";
    ruleValidate1.value.account_name.required = false;
    ruleValidate1.value.account_pwd.required = false;
    ruleValidate1.value.account_pwd_re.required = false;
    ruleValidate1.value.account_phone.required = false;
    ruleValidate1.value.account_mail.required = false;
    ruleValidate1.value.user_role_arr.required = false;
    ruleValidate3.value.account_name.required = false;
    ruleValidate3.value.account_pwd.required = false;
    ruleValidate3.value.account_pwd_re.required = false;
    ruleValidate3.value.account_phone.required = false;
    ruleValidate3.value.account_mail.required = false;
    ruleValidate3.value.user_role_arr.required = false;
  }
};
const nbryxzvalue = ref(false);
const gridOptions1 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,

  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },

  columns: [
    { type: "checkbox", width: 70, align: "center" },
    { field: "user_in_id", title: "序号", width: 70, align: "center" },
    { field: "user_name", title: "姓名", width: 150 },
    { field: "org_name", title: "部门", width: 120 },
    { field: "user_role_name_arr", title: "角色", width: 120, align: "center" },
    { field: "account_status", title: "状态", width: 100, align: "center" },
    {
      field: "login_time",
      title: "最后一次登录时间",
      width: 150,
      align: "center",
    },
    { field: "login_count", title: "登录次数", width: 100, align: "center" },
    {
      field: "operate",
      title: "操作",
      slot: "caozuo",
      align: "center",
      slots: { default: "operate" },
    },
  ],
});

const nbryxz = () => {
  const params = {
    user_name: formValidate1.value.user_name,
    user_shortname: formValidate1.value.user_shortname,
    user_sex: formValidate1.value.user_sex,
    user_nation: formValidate1.value.user_nation,
    user_idnum: formValidate1.value.user_idnum,
    user_birthday: moment(formValidate1.value.user_birthday).format(
      " YYYY/MM/DD hh:mm:ss "
    ),
    user_workday: moment(formValidate1.value.user_workday).format(
      "YYYY/MM/DD hh:mm:ss "
    ),
    org_in_id: formValidate1.value.org_in_id,
    is_open_account: formValidate1.value.is_open_account,
    user_role_arr: formValidate1.value.user_role_arr,
    account_name: formValidate1.value.account_name,
    account_pwd: formValidate1.value.account_pwd,
    account_pwd_re: formValidate1.value.account_pwd_re,
    user_telphone: formValidate1.value.user_telphone,
    user_email: formValidate1.value.user_email,
    user_phone: formValidate1.value.user_phone,
    user_job_type: formValidate1.value.user_job_type,
    user_job_range: formValidate1.value.user_job_range,
    user_job_num: formValidate1.value.user_job_num,
    user_job_title: formValidate1.value.user_job_title,
    user_job_title_app: formValidate1.value.user_job_title_app,
    user_desc: formValidate1.value.user_desc,
    account_phone: formValidate1.value.account_phone,
    account_mail: formValidate1.value.account_mail,
    user_his_id: "123456",
    sort_num: "1",
  };

  api_post_nbrytianjia(params)
    .then((res) => {
      console.log(res);
      if (res.data.msg == "20002001") {
        Message.success("添加成功");
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

const nbjgxzvalue = ref(false);
const formValidate2 = ref({
  org_pid: "0",
  org_name: "",
  org_short_name: "",
  org_py: "",
  org_type: "",
  org_contact: "",
  org_phone: "",
  org_tel: "",
  org_mail: "",
  is_virtually: "",
  org_person: "",
});

const ruleValidate2 = ref({
  org_name: [
    {
      required: true,
      message: "请输入部门名称",
      trigger: "blur",
    },
  ],
  is_virtually: [
    {
      required: true,

      trigger: "blur",
      type: "change",
    },
  ],
  org_type: [
    {
      required: true,

      trigger: "blur",
      type: "change",
    },
  ],
  org_person: [
    {
      required: true,
      message: "请输入负责人编号",
      trigger: "blur",
    },
  ],
  org_tel: [
    {
      pattern: /^0\d{2,3}-\d{7,8}$/,
      message: "请输入格式正确的固定电话",
    },
  ],
});
const gridOptions2 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,

  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { type: "checkbox", align: "center", width: 70 },
    { field: "org_in_id", title: "序号", width: 120, align: "center" },
    { field: "org_name", title: "部门名称", align: "center" },
    { field: "org_type", title: "部门分类", width: 120, align: "center" },
    {
      field: "is_virtually",
      title: "虚拟部门标识",
      widt: 120,
      align: "center",
    },
    { field: "org_mail", title: "部门邮箱", width: 270, align: "center" },
    { field: "created_time", title: "创建时间", width: 270, align: "center" },
    {
      field: "state",
      title: "操作",
      width: 280,
      align: "center",
      slots: { default: "operate" },
    },
  ],
  data: [],
});
const getorginsList = () => {
  api_get_orginslist()
    .then((res) => {
      gridOptions2.data = res.data.data.list;
    })
    .catch((err) => {
      console.log(err);
    });
};
const nbjgxz = () => {
  const params = {
    org_pid: parseInt(formValidate2.value.org_pid),
    org_name: formValidate2.value.org_name,
    org_short_name: formValidate2.value.org_short_name,
    org_py: formValidate2.value.org_py,
    org_type: parseInt(formValidate2.value.org_type),
    org_contact: formValidate2.value.org_contact,
    org_phone: formValidate2.value.org_phone,
    org_tel: formValidate2.value.org_tel,
    org_mail: formValidate2.value.org_mail,
    is_virtually: formValidate2.value.is_virtually,
    org_person: parseInt(formValidate2.value.org_person),
  };
  if (params.org_pid) {
    params.org_pid = parseInt(formValidate2.value.org_pid);
    console.log(params.org_pid);
  } else {
    params.org_pid = 0;
    console.log(params.org_pid);
  }
  api_post_orgintianjia(params)
    .then((res) => {
      console.log(res);
      if (res.data.msg == "20007001") {
        Message.success("添加成功");
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const wbryxzvalue = ref(false);
const formValidate3 = ref({
  user_name: "",
  user_py: "",
  user_idnum: "",
  user_birthday: "",
  user_sex: "",
  user_nation: "",
  user_work_phone: "",
  user_mail: "",
  user_mobile: "",
  sort_num: "",
  org_out_id: "",
  is_open_account: "",
  account_name: "",
  account_pwd: "",
  account_pwd_re: "",
  account_phone: "",
  account_mail: "",
  user_role_arr: "",
});
const ruleValidate3 = ref({
  user_name: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur",
    },
  ],
  user_sex: [
    {
      required: true,
      message: "请输入姓名",
      trigger: "blur",
      type: "change",
    },
  ],

  user_birthday: [
    {
      required: true,
      message: "请输入出生年月",
      trigger: "blur",
      type: "date",
    },
  ],

  org_out_id: [
    {
      required: true,
      message: "请选择所属机构",
      trigger: "change",
    },
  ],
  is_open_account: [
    {
      required: true,
      message: "",
      trigger: "change",
    },
  ],
  user_role_arr: [
    {
      required: true,
      message: "",
      trigger: "blur",
    },
  ],
  account_name: [
    {
      required: true,
      message: "请输入账号名称",
      trigger: "blur",
    },
  ],
  account_pwd: [
    {
      required: true,
      message: "请输入登录密码",
      trigger: "blur",
    },
  ],
  account_pwd_re: [
    {
      required: true,
      message: "请输入重复密码",
      trigger: "blur",
    },
  ],
  account_phone: [
    {
      required: true,
      message: "请输入手机号",
      trigger: "blur",
    },
  ],
  account_mail: [
    {
      required: true,
      message: "请输入格式正确的电子邮箱",
      trigger: "blur",
    },
    { type: "email" },
  ],
});
const gridOptions3 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,

  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { type: "checkbox", width: 70, align: "center" },
    { field: "user_out_id", title: "序号", align: "center", width: 70 },
    { field: "user_name", title: "姓名", width: 150 },
    { field: "org_name", title: "机构", width: 240, align: "center" },
    { field: "user_role_name_arr", title: "角色", width: 240 },
    { field: "account_status", title: "状态", width: 100, align: "center" },
    {
      field: "login_time",
      title: "最后一次登录时间",
      width: 150,
      align: "center",
    },
    { field: "login_count", title: "登录次数", width: 100, align: "center" },
    {
      field: "state",
      title: "操作",
      width: 250,
      align: "center",
      slots: { default: "operate" },
    },
  ],
});
const getuseroutslist = () => {
  api_get_userouts()
    .then((res) => {
      // console.log(res.data.data.list);
      gridOptions3.data = res.data.data.list;
    })
    .catch((err) => {
      console.log(err);
    });
};
const wbryxz = () => {
  const params = {
    user_name: formValidate3.value.user_name,
    user_py: formValidate3.value.user_py,
    user_idnum: formValidate3.value.user_idnum,
    user_birthday: formValidate3.value.user_birthday,
    user_sex: formValidate3.value.user_sex,
    user_nation: formValidate3.value.user_nation,
    user_work_phone: formValidate3.value.user_work_phone,
    user_mail: formValidate3.value.user_mail,
    user_mobile: formValidate3.value.user_mobile,
    sort_num: formValidate3.value.sort_num,
    org_out_id: formValidate3.value.org_out_id,
    is_open_account: formValidate3.value.is_open_account,
    account_name: formValidate3.value.account_name,
    account_pwd: formValidate3.value.account_pwd,
    account_pwd_re: formValidate3.value.account_pwd_re,
    account_phone: formValidate3.value.account_phone,
    account_mail: formValidate3.value.account_mail,
    user_role_arr: formValidate3.value.user_role_arr,
  };
  console.log(formValidate3.value.user_birthday);
  api_post_userouts(params)
    .then((res) => {
      console.log(res);
      if (res.data.msg == "20002001") {
        Message.success("添加成功");
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const wbjgxzvalue = ref(false);
const formValidate4 = ref({
  org_name: "",
  org_short_name: "",
  org_py: "",

  org_contact: "",
  org_phone: "",
  org_credit_code: "",
  org_address: "",
});
const ruleValidate4 = ref({
  org_name: [
    {
      required: true,
      message: "请输入机构名称",
      trigger: "blur",
    },
  ],
});
const gridOptions4 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,
  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { type: "checkbox", width: 70, align: "center" },
    { field: "org_out_id", title: "序号", width: 70, align: "center" },
    { field: "org_name", title: "机构名称", width: 500 },
    { field: "org_credit_code", title: "统一社会信用代码", width: 250 },
    { field: "created_time", title: "创建时间", width: 150 },
    {
      field: "Department",
      title: "操作",
      width: 300,
      align: "center",
      slots: { default: "operate" },
    },
  ],
});

const getorgoutslist = () => {
  api_get_orgouts()
    .then((res) => {
      // console.log(res.data.data.list);
      gridOptions4.data = res.data.data.list;
    })
    .catch((err) => {
      console.log(err);
    });
};
const wbjgxz = () => {
  const params = {
    org_name: formValidate4.value.org_name,
    org_short_name: formValidate4.value.org_short_name,
    org_py: formValidate4.value.org_py,
    org_contact: formValidate4.value.org_contact,
    org_phone: formValidate4.value.org_phone,
    org_credit_code: formValidate4.value.org_credit_code,
    org_address: formValidate4.value.org_address,
  };
  api_post_orgouts(params)
    .then((res) => {
      console.log(res);
      if (res.data.msg == "20015001") {
        Message.success("添加成功");
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
const jsxzvalue = ref(false);
const menudata = [
  {
    title: "parent 1",
    expand: true,
    children: [
      {
        title: "parent 1-1",
        expand: true,
        children: [
          {
            title: "leaf 1-1-1",
          },
          {
            title: "leaf 1-1-2",
          },
        ],
      },
      {
        title: "parent 1-2",
        expand: true,
        children: [
          {
            title: "leaf 1-2-1",
          },
          {
            title: "leaf 1-2-1",
          },
        ],
      },
    ],
  },
];
const formValidate5 =ref({
  role_pid:'',
  role_name:'',
  role_desc:'',
  menu_ids:'',
})
const ruleValidate5 = ref({
  role_pid: [
    {
      required: true,
      message: "请输入机构名称",
      trigger: "blur",
      type:"change"
    },
  ],
  role_name: [
    {
      required: true,
      message: "请输入角色名称",
      trigger: "blur",
    },
  ],
  menu_ids: [
    {
      required: true,
      message: "请输入机构名称",
      trigger: "blur",
      type:"change"
    },
  ],
})
const gridOptions5 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,

  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    { type: "checkbox", width: 70, align: "center" },
    { field: "role_name", title: "角色名称", width: 460, align: "center" },
    { field: "role_desc", title: "角色描述", width: 460 },
    { field: "created_time", title: "创建时间", width: 150 },
    {
      field: "operate",
      title: "操作",
      width: 220,
      align: "center",
      slots: { default: "operate" },
    },
  ],
});
const getjueselist = () => {
  api_get_roles()
    .then((res) => {
      // console.log(res.data.data.list);
      gridOptions5.data = res.data.data.list;
    })
    .catch((err) => {
      console.log(err);
    });
};

const gridOptions6 = reactive({
  border: true,
  keepSource: true,
  showOverflow: true,
  loading: false,
  columnConfig: {
    resizable: true,
  },
  customConfig: {
    storage: true,
  },
  editConfig: {
    trigger: "click",
    mode: "row",
    showStatus: true,
  },
  toolbarConfig: {
    custom: true,
    slots: {
      buttons: "toolbar_buttons",
    },
  },
  columns: [
    
    { field: "menu_name", title: "菜单名称", width: 920 },
    { field: "menu_icon", title: "菜单图标", width: 200 },
    { field: "menu_path", title: "请求地址" , width: 200  },
    { field: "menu_type", title: "类型", width: 100, align: "center" },
    { field: "menu_auth", title: "权限标识", width: 190, align: "center" },
    
  ],
});
const getmenulist = () => {
  api_get_menus()
    .then((res) => {
      // console.log(res.data.data.list);
      gridOptions6.data = res.data.data.list;
    })
    .catch((err) => {
      console.log(err);
    });
};
onMounted(() => {
  getNbryList();
  getorginsList();
  getuseroutslist();
  getorgoutslist();
  getjueselist();
  getmenulist();
});
</script>
  
  <style scoped>
.nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  font-size: 20px;
  height: 34px;
}

.a {
  display: flex;
  flex-direction: column;
}
.b {
  display: flex;
}
.left {
  flex: 1;
}
.right1 {
  flex: 1;
}
.nbry {
  display: flex;
}
.right {
  background-color: #fff;
  height: 100vh;
  border-left: 15px solid#f5f7f9;
  border-right: 15px solid#f5f7f9;
  width: 100%;
}
.nbjg {
  border-left: 5px solid#f5f7f9;
  border-right: 5px solid#f5f7f9;
  background-color: #fff;
  height: 100vh;
  width: 100%;
}
.wbry {
  border-left: 5px solid#f5f7f9;
  border-right: 5px solid#f5f7f9;
  background-color: #fff;
  height: 100vh;
  width: 100%;
}
.wbjg {
  border-left: 5px solid#f5f7f9;
  border-right: 5px solid#f5f7f9;
  background-color: #fff;
  height: 100vh;
  width: 100%;
}
.jsgl {
  border-left: 5px solid#f5f7f9;
  border-right: 5px solid#f5f7f9;
  background-color: #fff;
  height: 100vh;
  width: 100%;
}
.cdgl {
  border-left: 5px solid#f5f7f9;
  border-right: 5px solid#f5f7f9;
  background-color: #fff;
  height: 100vh;
  width: 100%;
}
</style>